<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>设备</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/comment.css" />
		<link rel="stylesheet" type="text/css" href="css/equipment.css" />
	</head>

	<body>
		<div id="app">
			<header class="mui-bar mui-bar-nav gradient">
				<div style="height: 20px;"></div>
				<a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" style="color: white;"></a>
				<h1 class="mui-title">设备</h1>
				<div class="mui-pull-right warnInfo">
					<span class="mui-badge mui-badge-danger" id="warnday">0</span>
				</div>
			</header>
			<!-- 设备信息 -->
			<div class="eq_info">
				<div class="top">
					<img class="logo eqDetail" src="images/teq01.jpg">
					<div>
						<strong class="title">{{dataList.DeviceName}}</strong>
						<div class="eqDetail">
							<small>设备编号：</small>
							<small>{{dataList.DeviceNO}}</small>
						</div>
					</div>
				</div>
				<div class="center">
					<div class="state">{{dataList.Status==1?"正常运行":"异常"}}</div>
					<div>
						<div class="mui-switch mui-disabled" :class="{'mui-active':dataList.Status==1?true:false}">
							<div class="mui-switch-handle"></div>
						</div>
					</div>
				</div>
				<div class="bottom">
					<div class="item">
						<div class="title">型号规格</div>
						<div>
							<img src="images/teq02.png">
							<small class="normal">{{dataList.Secifications}}</small>
						</div>
					</div>
					<div class="item border">
						<div class="title">使用部门</div>
						<div>
							<img src="images/teq03.png">
							<small class="normal">{{dataList.UseDept}}</small>
						</div>
					</div>
					<div class="item">
						<div class="title">安装地点</div>
						<div>
							<img src="images/teq01.png">
							<small class="normal">{{dataList.InstallAddress}}</small>
						</div>
					</div>
				</div>
			</div>
			
			
			
			
			<!-- 设备数据 -->
			<div class="eq_data">
				<strong class="eqtitle">
					<div class="line"></div>
					<div>设备数据</div>
				</strong>
				<div class="itembox">
					<div class="item item_click" data-href="eqChart">
						<img src="images/teq01.jpg">
						<div>流程图</div>
					</div>
					<div class="item item_href" data-href="dataNow">
						<img src="images/teq03.jpg">
						<div>数据管理</div>
					</div>
					<div class="item item_href" data-href="eqAssembly">
						<img src="images/teq02.jpg">
						<div>设备组件</div>
					</div>
					<div class="item item_href" data-href="maintenance">
						<img src="images/teq04.jpg">
						<div>维护记录</div>
					</div>
				</div>
			</div>
			
			
			
			<!-- 报警信息 -->
			<div class="eq_alarm">
				<strong class="eqtitle">
					<div class="line"></div>
					<div class="title">报警信息</div>
					<span class="icon mui-icon mui-icon-arrowright warnBtn"></span>
				</strong>
				<div class="warn_item">
					<div class="map_equiment_listItem" v-for="(item ,key) in alarmList">
						<div class="eq_img">
							<div class="eq_img_title">
								<span class="eqDe_btn">{{item.DeviceName}}</span>
							</div>
						</div>
						<div class="eq_info">
							<div class="item">
								<span class="title">报警名称：</span>
								<span class="info">{{item.W_Title}}</span>
							</div>
							<div class="item">
								<span class="title">报警类型：</span>
								<span class="info">{{item.W_Type}}</span>
							</div>
							<div class="item">
								<span class="title">报警时间：</span>
								<span class="info">{{item.W_Time}}</span>
							</div>
							<div class="item">
								<span class="title">报警描述：</span>
								<span class="info">{{item.W_Content}}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			
		</div>
		<script src="js/mui.js"></script>
		<script src="js/jquery.js"></script>
		<script src="js/rem.js"></script>
		<script src="js/vue.min.js"></script>
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data: {
					url: "http://112.54.80.235:8038",
					dataList: {},
					alarmList: []
				},
				created:function(){
					this.getEq(0);
				},
				methods: {
					getEq(eqName){
						var _this=this;
						//获取设备信息
						axios.get(_this.url + '/actionapi/Users/SJGetSheBei', {
								params: {
									DevNo: eqName
								}
							})
							.then(function(response) {
								var data = response.data.data;
								_this.dataList = data[0];
								_this.getAlarm(data[0].DeviceName);
							})
							.catch(function(error) {
								plus.nativeUI.alert("SJGetSheBei接口有误", function(e) {
									console.log(e.index);
								}, "信息提示", '确定');
							});
					},
					getAlarm(eqName){
						var _this=this;
						console.log("bb--"+eqName);
						//获取设备信息
						axios.get(_this.url + '/actionapi/Users/GetToNowBaoJing', {
								params: {
									devicename: eqName,
									now:"now"
								}
							})
							.then(function(response) {
								var data = response.data.data;
								if(data!="获取失败"){
									_this.alarmList = JSON.parse(data);
								}else{
									_this.alarmList="";
								}
								
							})
							.catch(function(error) {
								plus.nativeUI.alert("GetToNowBaoJing接口有误", function(e) {
									console.log(e.index);
								}, "信息提示", '确定');
							});
					}
				},
				mounted() {
					var _this=this;
					mui.init()
					mui.plusReady(function() {
						//初始化加载报警数量
						$.ajax({
							type:'get',
							url: 'http://112.54.80.235:8038' + '/actionapi/Users/GetBaoJingToDayCount',
							data:{
								devicename:0
							},
							dataType: 'json',
							success:function(data){
								var datas = data.data;
								$("#warnday").text(datas)
								
							}
						});
										
						//报警按钮
						$('.warnInfo').click(function() {
							mui.openWindow({
								url: "alarmMessage.html",
								id: "alarmMessage.html",
								extras: {
									info: 0
								},
								waiting: {
									autoShow: true, //自动显示等待框，默认为true
									title: '正在加载...', //等待对话框上显示的提示内容
								}
							})
						});
						
						// //获取警报信息
						// axios.get(app.$data.url + '/actionapi/Users/GetSJWarningNow', {
						// 		params: {
						// 			//DevNo: app.$data.DevNo,
						// 			//startime:0,
						// 			//endtime:0,
						// 			//level:0
						// 		}
						// 	})
						// 	.then(function(response) {
						// 		var data = response.data.data;
						// 		console.log(JSON.stringify(data))
						// 		app.alarmList = data;
						// 		//报警信息长度
						// 		//app.alarmList.splice(2)
						// 	})
						// 	.catch(function(error) {
						// 		plus.nativeUI.alert("SJGetSheBei接口有误", function(e) {
						// 			console.log(e.index);
						// 		}, "信息提示", '确定');
						// 	});
						//设备列表
						$('.mui-action-menu').click(function() {
							mui.openWindow({
								url: 'eqList.html',
								id: 'eqList.html',
								waiting: {
									autoShow: true, //自动显示等待框，默认为true
									title: '正在加载...', //等待对话框上显示的提示内容
								}
							})
						})
						//四流程
						$('.itembox .item_href').click(function() {
							var href = $(this).attr("data-href");
							mui.openWindow({
								url: href + '.html',
								id: href + '.html',
								extras: {
									proid: app.dataList.DeviceNO,
									info:app.dataList
								},
								waiting: {
									autoShow: true, //自动显示等待框，默认为true
									title: '正在加载...', //等待对话框上显示的提示内容
								}
							})
						});
						//组件
						// $('.itembox .item_zu').click(function() {
						// 	var href = $(this).attr("data-href");
						// 	mui.openWindow({
						// 		url: href + '.html',
						// 		id: href + '.html',
						// 		extras: {
						// 			proid: app.dataList.Id,
						// 			name: app.dataList.DeviceName
						// 		},
						// 		waiting: {
						// 			autoShow: true, //自动显示等待框，默认为true
						// 			title: '正在加载...', //等待对话框上显示的提示内容
						// 		}
						// 	})
						// });
						//工艺流程图
						$('.itembox .item_click').click(function() {
							var href = "";
							var val = String(app.dataList.Id);
							switch (val) {
								case "0":
									//热洗撬
									href = "eqChart.html";
									break;
								case "1":
									//热洗撬
									href = "eqChart2.html";
									break;
								case "2":
									//气浮撬
									href = "eqChart1.html";
									break;
								case "3":
									//加药供水撬
									href = "eqChart3.html";
									break;
								case "4":
									//振动筛分撬
									href = "eqChart4.html";
									break;
								case "5":
									//压滤机
									href = "eqChart5.html";
									break;
							}
							localStorage.setItem("backInfo","false");
							var main = plus.webview.getWebviewById(href);
							mui.fire(main, 'screen');
							mui.openWindow({
								url: href,
								id: href,
								extras: {
									proid: app.dataList.DeviceNO,
									info:app.dataList
								},
								waiting: {
									autoShow: true, //自动显示等待框，默认为true
									title: '正在加载...', //等待对话框上显示的提示内容
								}
							});
						});
						//查看设备信息
						$('.eqDetail').on("tap",function(){
							mui.openWindow({
								url: 'eqDetail.html',
								id: 'eqDetail.html',
								extras: {
									proid: app.dataList.DeviceNO
								},
								waiting: {
									autoShow: true, //自动显示等待框，默认为true
									title: '正在加载...', //等待对话框上显示的提示内容
								}
							})
						});
						//报警信息
						$('.warnBtn').click(function() {
							mui.openWindow({
								url: 'alarmMessage.html',
								id: 'alarmMessage.html',
								extras: {
									proid: app.dataList.DeviceNO,
									info:app.dataList
								},
								waiting: {
									autoShow: true, //自动显示等待框，默认为true
									title: '正在加载...', //等待对话框上显示的提示内容
								}
							})
						});
						//报警列表点击
						$(".eq_warn").on("tap",'.warn_warn',function(){
							var devId=$(this).attr("data-id");
							mui.openWindow({
								url: 'alarmDetail.html',
								id: 'alarmDetail.html',
								extras: {
									proid: devId
								},
								waiting: {
									autoShow: true, //自动显示等待框，默认为true
									title: '正在加载...', //等待对话框上显示的提示内容
								}
							})
						});
						document.addEventListener('eqId', function(e) {
							_this.getEq(e.detail.id);
							//_this.getAlarm(e.detail.name);
						})
					});
				}
			});
		</script>
	</body>

</html>
